<template>
  <div id="rich"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
let myRich = null;
let myEchart = null;
onMounted(() => {
  myRich = document.getElementById("rich");
  myEchart = echarts.init(myRich);
  let option = {
    tooltip: {},

    series: [
      {
        type: "tree",
        roam: true,  // 允许缩放拖拽
        // layout: "radial",  // orthogonal 正交或者 radial径向
        orient: "BT", // LR RL BT TB
        edgeShape: 'polyline',
        edgeForkPosition: '80%',
        initialTreeDepth: 0,  // 初始化展开层级
        expandAndCollapse: false,  // 默认收起子节点
        lineStyle: {
            color: 'blue'
        },
        label: {
          show: true,
          position: "bottom",
        },
        itemStyle: {
            color: 'red'
        },
        leaves: {
            label: {
                show: false
            }
        },
        data: [
          {
            name: "a",
            children: [
              {
                name: "b1",
              },
              {
                name: "b2",
                children: [
                  {
                    name: "c1",
                  },
                  {
                    name: "c2",
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  };
  myEchart.setOption(option);
});
onUnmounted(() => {
  myEchart.dispose(myRich);
});
</script>

<style lang="less" scoped>
#rich {
  width: 800px;
  height: 400px;
}
</style>
